<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="title">健康资讯</view>
        </view>

        <!-- 分类标签 -->
        <scroll-view scroll-x="true" class="category-scroll">
            <view class="category-list">
                <view 
                    class="category-item"
                    v-for="(item, index) in categories"
                    :key="index"
                    :class="{ active: currentCategory === item.id }"
                    @click="switchCategory(item.id)"
                >
                    {{item.name}}
                </view>
            </view>
        </scroll-view>

        <!-- 文章列表 -->
        <view class="article-list">
            <view 
                class="article-item"
                v-for="(article, index) in articleList"
                :key="index"
                @click="viewArticle(article)"
            >
                <view class="content">
                    <view class="title">{{article.title}}</view>
                    <view class="desc">{{article.description}}</view>
                    <view class="meta">
                        <text class="category">{{article.category}}</text>
                        <text class="views">{{article.views}}阅读</text>
                        <text class="date">{{article.date}}</text>
                    </view>
                </view>
                <image 
                    class="cover" 
                    :src="article.cover" 
                    mode="aspectFill"
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentCategory: 1,
            categories: [
                { id: 1, name: '全部' },
                { id: 2, name: '疾病预防' },
                { id: 3, name: '健康饮食' },
                { id: 4, name: '运动康复' },
                { id: 5, name: '心理健康' },
                { id: 6, name: '用药指导' }
            ],
            articleList: [
                {
                    id: 1,
                    title: '高血压患者的饮食指南',
                    description: '合理的饮食习惯对控制血压至关重要，本文为您详细介绍高血压患者的饮食注意事项。',
                    category: '健康饮食',
                    views: 1245,
                    date: '2024-03-20',
                    cover: '/static/images/article-1.jpg'
                },
                {
                    id: 2,
                    title: '春季养生必备知识',
                    description: '春季是养生的重要时节，如何在这个季节更好地调养身体？一起来了解下。',
                    category: '疾病预防',
                    views: 986,
                    date: '2024-03-19',
                    cover: '/static/images/article-2.jpg'
                },
                {
                    id: 3,
                    title: '老年人居家康复训练指南',
                    description: '针对老年人的特点，介绍一些简单有效的居家康复训练方法。',
                    category: '运动康复',
                    views: 876,
                    date: '2024-03-18',
                    cover: '/static/images/article-3.jpg'
                }
            ]
        }
    },
    methods: {
        switchCategory(id) {
            this.currentCategory = id;
            // TODO: 根据分类获取文章列表
            this.getArticleList(id);
        },
        getArticleList(categoryId) {
            // TODO: 调用接口获取文章列表
        },
        viewArticle(article) {
            uni.navigateTo({
                url: `/pages/health/article-detail?id=${article.id}`
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #f5f5f5;
}

.nav-bar {
    background: #fff;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    
    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }
}

.category-scroll {
    margin-top: 88rpx;
    background: #fff;
    white-space: nowrap;
    padding: 20rpx 0;
    
    .category-list {
        padding: 0 20rpx;
        display: inline-block;
        
        .category-item {
            display: inline-block;
            padding: 10rpx 30rpx;
            margin: 0 10rpx;
            font-size: 28rpx;
            color: #666;
            background: #f5f5f5;
            border-radius: 30rpx;
            
            &.active {
                background: #1890FF;
                color: #fff;
            }
        }
    }
}

.article-list {
    padding: 20rpx;
    margin-top: 20rpx;
    
    .article-item {
        display: flex;
        background: #fff;
        padding: 20rpx;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        
        .content {
            flex: 1;
            margin-right: 20rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            
            .desc {
                font-size: 26rpx;
                color: #666;
                margin-bottom: 20rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            
            .meta {
                display: flex;
                align-items: center;
                gap: 20rpx;
                
                text {
                    font-size: 24rpx;
                    color: #999;
                    
                    &.category {
                        color: #1890FF;
                    }
                }
            }
        }
        
        .cover {
            width: 200rpx;
            height: 140rpx;
            border-radius: 8rpx;
        }
    }
}
</style> 